﻿/*#region Tables*/
.table {
    background-color: @white;
    margin-bottom: 0;

    tfoot {
        > tr {
            > th {
                font-weight: 300;
            }
        }
    }

    thead {
        > tr {
            > th {
                border-bottom: 0;
                font-size: 13px;
                font-weight: 600;
            }
        }
        /*#region Colored Header*/
        &[class*="colored-"] {
            > tr {
                > th {
                    color: @white;
                    font-weight: 400;
                }
            }
        }

        &.colored-blue {
            > tr {
                > th {
                    background-color: @blue;
                }
            }
        }

        &.colored-primary {
            > tr {
                > th {
                    background-color: @primary;
                }
            }
        }

        &.colored-danger {
            > tr {
                > th {
                    background-color: @danger;
                }
            }
        }

        &.colored-success {
            > tr {
                > th {
                    background-color: @success;
                }
            }
        }

        &.colored-warning {
            > tr {
                > th {
                    background-color: @warning;
                }
            }
        }

        &.colored-silver {
            > tr {
                > th {
                    background-color: @silver;
                }
            }
        }

        &.colored-inverse {
            > tr {
                > th {
                    background-color: @carbon;
                }
            }
        }

        &.colored-blueberry {
            > tr {
                > th {
                    background-color: @blueberry;
                }
            }
        }

        &.colored-palegreen {
            > tr {
                > th {
                    background-color: @palegreen;
                }
            }
        }

        &.colored-orange {
            > tr {
                > th {
                    background-color: @orange;
                }
            }
        }

        &.colored-darkorange {
            > tr {
                > th {
                    background-color: @darkorange;
                }
            }
        }

        &.colored-magenta {
            > tr {
                > th {
                    background-color: @magenta;
                }
            }
        }

        &.colored-purple {
            > tr {
                > th {
                    background-color: @purple;
                }
            }
        }

        &.colored-maroon {
            > tr {
                > th {
                    background-color: @maroon;
                }
            }
        }
        /*#endregion Colored Header*/
        /*#region Bordered Header*/
        &.bordered-blue {
            > tr {
                > th {
                    border-bottom: 3px solid @blue;
                }
            }
        }

        &.bordered-primary {
            > tr {
                > th {
                    border-bottom: 3px solid @primary;
                }
            }
        }

        &.bordered-danger {
            > tr {
                > th {
                    border-bottom: 3px solid @danger;
                }
            }
        }

        &.bordered-success {
            > tr {
                > th {
                    border-bottom: 3px solid @success;
                }
            }
        }

        &.bordered-warning {
            > tr {
                > th {
                    border-bottom: 3px solid @warning;
                }
            }
        }

        &.bordered-silver {
            > tr {
                > th {
                    border-bottom: 3px solid @silver;
                }
            }
        }

        &.bordered-inverse {
            > tr {
                > th {
                    border-bottom: 3px solid @carbon;
                }
            }
        }

        &.bordered-blueberry {
            > tr {
                > th {
                    border-bottom: 3px solid @blueberry;
                }
            }
        }

        &.bordered-palegreen {
            > tr {
                > th {
                    border-bottom: 3px solid @palegreen;
                }
            }
        }

        &.bordered-orange {
            > tr {
                > th {
                    border-bottom: 3px solid @orange;
                }
            }
        }

        &.bordered-darkorange {
            > tr {
                > th {
                    border-bottom: 3px solid @darkorange;
                }
            }
        }

        &.bordered-magenta {
            > tr {
                > th {
                    border-bottom: 3px solid @magenta;
                }
            }
        }

        &.bordered-purple {
            > tr {
                > th {
                    border-bottom: 3px solid @purple;
                }
            }
        }

        &.bordered-maroon {
            > tr {
                > th {
                    border-bottom: 3px solid @maroon;
                }
            }
        }
        /*#endregion Bordered Header*/
    }

    tr {
        &.success {
            td:first-child {
                .box-shadow(2px 0 0 @success inset);
            }
        }

        &.danger {
            td:first-child {
                .box-shadow( 2px 0 0 @danger inset);
            }
        }

        &.warning {
            td:first-child {
                .box-shadow( 2px 0 0 @warning inset);
            }
        }

        &.active {
            td:first-child {
                .box-shadow(2px 0 0 @sonic-silver inset);
            }
        }

        td {
            &.success {
                .box-shadow(2px 0 0 @success inset);
            }

            &.danger {
                .box-shadow(2px 0 0 @danger inset);
            }

            &.warning {
                .box-shadow(2px 0 0 @warning inset);
            }

            &.active {
                .box-shadow(2px 0 0 @sonic-silver inset);
            }
        }
    }
}

.table-bordered {
    thead {
        > tr {
            background-color: #eee;
            .background-image(linear-gradient(top,#f2f2f2 0,#fafafa 100%));
        }
    }
}

.table > thead > tr > .active,
.table > tbody > tr > .active,
.table > tfoot > tr > .active,
.table > thead > .active > td,
.table > tbody > .active > td,
.table > tfoot > .active > td,
.table > thead > .active > th,
.table > tbody > .active > th,
.table > tfoot > .active > th,
.table-striped > tbody > tr.active:nth-child(odd) > td,
.table-striped > tbody > tr > .active:nth-child(odd) > th {
    background-color: #f1f1f1;
    color: #222;
}

.table-hover > tbody > tr > .active:hover,
.table-hover > tbody > .active:hover > td,
.table-hover > tbody > .active:hover > th,
.table-striped > tbody > tr.active:hover:nth-child(odd) > td,
.table-striped > tbody > tr > .active:hover:nth-child(odd) > th {
    background-color: @platinum !important;
}

.table > thead > tr > .success, .table > tbody > tr > .success, .table > tfoot > tr > .success, .table > thead > .success > td, .table > tbody > .success > td, .table > tfoot > .success > td, .table > thead > .success > th, .table > tbody > .success > th, .table > tfoot > .success > th {
    color: #119000;
}

.table > thead > tr > .danger, .table > tbody > tr > .danger, .table > tfoot > tr > .danger, .table > thead > .danger > td, .table > tbody > .danger > td, .table > tfoot > .danger > td, .table > thead > .danger > th, .table > tbody > .danger > th, .table > tfoot > .danger > th {
    color: #CD2929;
}

.table > thead > tr > .warning, .table > tbody > tr > .warning, .table > tfoot > tr > .warning, .table > thead > .warning > td, .table > tbody > .warning > td, .table > tfoot > .warning > td, .table > thead > .warning > th, .table > tbody > .warning > th, .table > tfoot > .warning > th {
    color: @orange;
}

.table-scrollable {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #dddddd;

    > .table {
        width: 100% !important;
        margin: 0 !important;
        margin-bottom: 0;
        background-color: #fff;

        > thead > tr > th,
        > tbody > tr > th,
        > tfoot > tr > th,
        > thead > tr > td,
        > tbody > tr > td,
        > tfoot > tr > td {
            white-space: nowrap;
        }
    }

    > .table-bordered {
        border: 0;

        > thead > tr > th,
        > tbody > tr > th,
        > tfoot > tr > th,
        > thead > tr > td,
        > tbody > tr > td,
        > tfoot > tr > td {
            &:first-child {
                border-left: 0;
            }

            &:last-child {
                border-right: 0;

                > td {
                    border-bottom: 0;
                }
            }
        }
    }
}

.flip-scroll table {
    width: 100%;
}

@media only screen and (max-width: 800px) {

    .flip-scroll {
        .flip-content:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

        html .flip-content {
            -ms-zoom: 1;
            zoom: 1;
        }

        *:first-child + html .flip-content {
            -ms-zoom: 1;
            zoom: 1;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
            display: block;
            position: relative;
        }

        th,
        td {
            margin: 0;
            vertical-align: top;

            &:last-child {
                border-bottom: 1px solid #ddd;
            }
        }

        th {
            border: 0 !important;
            border-right: 1px solid #ddd !important;
            font-size: 13px !important;
            padding: 5px;
            width: auto !important;
            display: block;
            text-align: right;
            border-bottom: 0;
            border-left: 0;
        }

        td {
            display: block;
            min-height: 1.25em;
            text-align: left;
            border-top: 0 !important;
            border-left: 0;
            border-right: 0;
            border-bottom: 0;
        }

        thead {
            display: block;
            float: left;

            tr {
                display: block;
                border: !important;
            }

            &.bordered-blue {
                > tr {
                    > th {
                        border-right: 3px solid @blue !important;
                    }
                }
            }

            &.bordered-primary {
                > tr {
                    > th {
                        border-right: 3px solid @primary !important;
                    }
                }
            }

            &.bordered-danger {
                > tr {
                    > th {
                        border-right: 3px solid @danger !important;
                    }
                }
            }

            &.bordered-success {
                > tr {
                    > th {
                        border-right: 3px solid @success !important;
                    }
                }
            }

            &.bordered-warning {
                > tr {
                    > th {
                        border-right: 3px solid @warning !important;
                    }
                }
            }

            &.bordered-silver {
                > tr {
                    > th {
                        border-right: 3px solid @silver !important;
                    }
                }
            }

            &.bordered-inverse {
                > tr {
                    > th {
                        border-right: 3px solid @carbon !important;
                    }
                }
            }

            &.bordered-blueberry {
                > tr {
                    > th {
                        border-right: 3px solid @blueberry !important;
                    }
                }
            }

            &.bordered-palegreen {
                > tr {
                    > th {
                        border-right: 3px solid @palegreen !important;
                    }
                }
            }

            &.bordered-orange {
                > tr {
                    > th {
                        border-right: 3px solid @orange !important;
                    }
                }
            }

            &.bordered-darkorange {
                > tr {
                    > th {
                        border-right: 3px solid @darkorange !important;
                    }
                }
            }

            &.bordered-magenta {
                > tr {
                    > th {
                        border-right: 3px solid @magenta !important;
                    }
                }
            }

            &.bordered-purple {
                > tr {
                    > th {
                        border-right: 3px solid @purple !important;
                    }
                }
            }

            &.bordered-maroon {
                > tr {
                    > th {
                        border-right: 3px solid @maroon !important;
                    }
                }
            }
        }

        tbody {
            display: block;
            width: auto;
            position: relative;
            overflow-x: auto;
            white-space: nowrap;

            tr {
                display: inline-block;
                vertical-align: top;
                margin-left: -5px;
                border-left: 1px solid #ddd;
            }
        }
    }
}

.table-toolbar {
    padding: 10px 0;
}

.dropdown-checkboxes {
    padding: 5px;

    .checker {
        display: block;
        font-weight: 300;
        color: #333;
        margin: 0 4px;
        line-height: 24px;

        input {
            margin-top: 5px;
        }

        span {
            padding-left: 5px;
        }
    }
}
/*#endregion Tables*/